import services from '@/services/demo';
import {
  ActionType,
  FooterToolbar,
  ProDescriptions,
  ProDescriptionsItemProps,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, Drawer, message,Form,Modal } from 'antd';
import React, { useRef, useState,useEffect } from 'react';
import CreateForm from '@/components/CreateForm';

const { rewardList,detail,del,update } =
  services.infoController;

const TableList: React.FC<unknown> = () => {
  const [list, setList] = useState<any[]>([]);// 列表数据
  const [actionId, setActionId] = useState<string>('');// 
  const [actionItem, setActionItem] = useState<any>({});// 
  const [pageNum, setPageNum] = useState<number>(1);// 

  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();
  const columns: ProDescriptionsItemProps<API.OrderClumns>[] = [
    {
      title: '客户名称',
      dataIndex: 'customerName',
    },
    {
      title: '课程名称',
      dataIndex: 'lessonName',
      valueType: 'text',
    },
    {
      title: '课程费用',
      dataIndex: 'lessonPrice',
      hideInSearch: true,
      valueType: 'digit',
    },
    {
      title: '可获得积分',
      dataIndex: 'gainPoint',
      hideInSearch: true,
      valueType: 'digit',
    },
    {
      title: '操作时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      hideInForm:true,
    },
  ];
  // 获取列表数据
  const getList = ()=>{
    rewardList({pageNum,pageSize:10,...searchData}).then((res:any)=>{
      if(res.code=='200'){
        setList(res.data.list || [])
        setTotal(res.data.total)
      }else{
        message.error(res.message);
      }
    })
  }
  const [searchData, setSearchData] = useState<any>({});// 搜索参数
  useEffect(()=>{
    getList()// 获取列表数据
  },[pageNum,searchData])
  const search = async (value:any) => {
    console.log('search',value)
    setPageNum(1)
    setSearchData({...value})
  }
  const add = (data:any={})=>{
    form.resetFields();// 重置
    handleModalVisible(true)
    if(data.id){// 编辑  
      setActionId(data.id || '')
      form.setFieldsValue({...data})
      setActionItem({...data})
    }else{// 新建
      setActionId('')
    }
  }
  const onsubmit = async (value:any) => {
    if(actionId){
      update({
        id:actionId,
        ...value,
        orderType:1,
        studentId:actionItem.studentId
      }).then((res:any)=>{
        if(res.code=='200'){
          message.success('修改成功');
          handleModalVisible(false)
          getList()
        }else{
          message.error(res.message);
        }
      })
    }
    // else{
    //   add({...value}).then((res:any)=>{
    //     if(res.code=='200'){
    //       message.success('提交成功');
    //       handleModalVisible(false)
    //       getList()
    //     }else{
    //       message.error(res.message);
    //     }
    //   })
    // }
  }
  // 删除节点
  const handleRemove = async (id:string) => {
    Modal.confirm({
      title: '确定删除此条数据？',
      content: '',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        const hide = message.loading('正在删除');
        del({id:id}).then((res:any)=>{
          if(res.code=='200'){
            hide()
            message.success('删除成功，即将刷新');
            getList()
          }else{
            message.error(res.message);
          }
        })

      },
      onCancel() {
        
      },
    });
  };
  const [total, setTotal] = useState<number>(0);// 总数
  const pageOnChange = (page:number, pageSize:number)=>{
    setPageNum(page)
  }
  return (
    <div>
      <ProTable<API.UserInfo>
        // headerTitle="查询表格"
        actionRef={actionRef}
        onSubmit={search}
        rowKey="id"
        search={{
          defaultCollapsed:false,
          labelWidth: 120,
        }}
        pagination={{
          total,
          current:pageNum,
          pageSizeOptions:[],
          pageSize:10,
          hideOnSinglePage:true,
          onChange:pageOnChange
        }}
        dataSource={list}
        columns={columns}
      />
      <CreateForm
        onCancel={() => handleModalVisible(false)}
        modalVisible={createModalVisible}
        title={actionId?'编辑':'新增'}
      >
        <ProTable<API.UserInfo, API.UserInfo>
          onSubmit={onsubmit}
          rowKey="id"
          type="form"
          form={{
            form,
          }}
          columns={columns}
        />
      </CreateForm>
    </div>
  );
};

export default TableList;
